<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	template="../templates/template.xhtml">
	<ui:define name="body">
		<table width="100%">
			<tr>
				<td align="left">
				<h2><h:outputText
					value="#{titulos.MANTENIMIENTO_PERSONAS}" /></h2>
				</td>
			</tr>
			<tr>
				<td align="center"><rich:panel styleClass="fondoBlanco">
					<f:view>
						<h:form id="frmMantDemo">
							<h:outputText value="#{personaAction.iniciar}" />
							<a4j:region id="pnlBusquedaAjax">
								<rich:simpleTogglePanel switchType="client"
									label="#{titulos.ENCABEZADO_PANEL_BUSQUEDA}">

									<div align="left">
											<rich:spacer height="5px" /> 
											<h:panelGrid columns="7" columnClasses="alineaIzquierda">
												<h:outputLabel value="#{titulos.ETIQUETA_DNI}: (*)" />
												<rich:spacer width="10px" />
												<h:panelGroup>
													<h:inputText id="txtDNI" value="#{personaAction.personaNatural.dni}"
														maxlength="8" style="text-transform:uppercase;width:100px" />
												</h:panelGroup>
												<rich:spacer width="10px" />
												<h:outputLabel value="#{titulos.ETIQUETA_NOMBRES}: (*)" />
												<rich:spacer width="10px" />
												<h:panelGroup>
													<h:inputText id="txtNombres" value="#{personaAction.personaNatural.nombres}"
														maxlength="50" style="text-transform:uppercase;width:300px" />
												</h:panelGroup>
												
												<h:outputLabel value="#{titulos.ETIQUETA_APELLIDO_PAT}: (*)" />
												<rich:spacer width="10px" />
												<h:panelGroup>
													<h:inputText id="txtApePaterno" value="#{personaAction.personaNatural.apellidoPaterno}"
														maxlength="50" style="text-transform:uppercase;width:300px" />
												</h:panelGroup>
												<rich:spacer width="10px" />
												<h:outputLabel value="#{titulos.ETIQUETA_APELLIDO_MAT}: (*)" />
												<rich:spacer width="10px" />
												<h:panelGroup>
													<h:inputText id="txtApeMaterno" value="#{personaAction.personaNatural.apellidoMaterno}"
														maxlength="50" style="text-transform:uppercase;width:300px" />
												</h:panelGroup>
											</h:panelGrid> 
											
												
											
											
											<rich:spacer height="10px" /> 
											<div align="center">
											<h:panelGrid border="0" columns="1">
												<a4j:commandButton id="btnBuscarPorCodigo" value="Buscar"
													action="#{personaAction.buscarPersona}"
													reRender="tabla,txtRegEncon,scTabla"
													styleClass="anchoBoton" ignoreDupResponses="true" />
											</h:panelGrid> <rich:spacer height="5px" />
											</div>
											</div>

								</rich:simpleTogglePanel>
								<br />
								<div align="left">
								<h:panelGrid border="0" columns="8">
									<h:panelGrid border="0" columns="8">
										<h:commandButton id="nuevo" value="Nuevo"
											styleClass="anchoBoton" immediate="true"
											action="#{personaAction.eventoIrRegistrarPersona}" />
										<rich:spacer height="5px" />
										<h:commandButton id="actualizar" value="Actualizar"
											styleClass="anchoBoton" immediate="true"
											 />
										<rich:spacer height="5px" />
										<h:commandButton id="eliminar" value="Eliminar"
											styleClass="anchoBoton" immediate="true"
											 />		

									</h:panelGrid>
								</h:panelGrid>
								</div>
						

							</a4j:region>

							<div align="left"><h:panelGrid width="100%;">
								<rich:spacer height="10px" />
								<h:outputText
									value="#{titulos.ENCABEZADO_PANEL_RESULTADO_BUSQUEDA}"
									styleClass="estiloResultadoBusqueda" />
								<rich:separator height="1px" width="100%;" />
								<rich:spacer height="15px" />
							</h:panelGrid></div>
							<rich:dataTable id="tabla" rows="10" border="1"
								style="width: 100%; "
								value="#{personaAction.listaBusquedaPersonas}"
								var="data" binding="#{personaAction.radioDataTable}"
								reRender="scTabla"
								onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
								onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
								<f:facet name="header">
									<rich:datascroller id="scTabla" for="tabla"
										selectedStyle="font-weight:bold" align="center" />
								</f:facet>
								<rich:column width="50px;">
									<f:facet name="header">
										<h:outputText value="Sel." />
									</f:facet>
									<div align="center"><h:selectOneRadio styleClass="none"
										onclick="dataTableSelectOneRadio(this)">
										<f:selectItem itemValue="#{data.seleccionado}" />
										<a4j:support event="onchange"
											action="#{personaAction.establecerElementoSeleccionado}"
											ajaxSingle="true" />
									</h:selectOneRadio></div>
								</rich:column>
								<rich:column sortBy="#{data.codigo}" width="70px;">
									<f:facet name="header">
										<h:outputText value="Codigo" />
									</f:facet>
									<div align="left"><h:outputText
										value="#{data.codigo}" /></div>
								</rich:column>
								<rich:column sortBy="#{data.nombres}">
									<f:facet name="header">
										<h:outputText value="Nombre" />
									</f:facet>
									<div align="left"><h:outputText value="#{data.nombres}" />
									</div>
								</rich:column>
								<rich:column sortBy="#{data.apellidoPaterno}" width="50px;">
									<f:facet name="header">
										<h:outputText value="Apellido Paterno" />
									</f:facet>
									<div align="left"><h:outputText
										value="#{data.apellidoPaterno}" /></div>
								</rich:column>
								<rich:column sortBy="#{data.apellidoMaterno}" width="50px;">
									<f:facet name="header">
										<h:outputText value="Apellido Materno" />
									</f:facet>
									<div align="left"><h:outputText
										value="#{data.apellidoMaterno}" /></div>
								</rich:column>
								<rich:column sortBy="#{data.dni}" width="80px;">
									<f:facet name="header">
										<h:outputText value="Numero Documento" />
									</f:facet>
									<div align="left"><h:outputText
										value="#{data.dni}" /></div>
								</rich:column>
								<f:facet name="footer">
									<rich:columnGroup id="groupColumnResultadoEncontrado"
										styleClass="footerTable">
										<rich:column colspan="6">
											<h:panelGrid id="regEncon">
												<h:outputText id="txtRegEncon"
													value="#{personaAction.registrosEncontrados}"
													styleClass="footerTableText" />
											</h:panelGrid>
										</rich:column>
									</rich:columnGroup>
								</f:facet>
							</rich:dataTable>
						</h:form>

						<rich:modalPanel id="wait" autosized="true" width="85" height="30"
							moveable="false" resizeable="false">
							<h:graphicImage value="../images/spinner_pj.gif" />
							<h:outputText value="Espere..." />
						</rich:modalPanel>
					</f:view>
				</rich:panel></td>
			</tr>
		</table>
		<a4j:status for="pnlBusquedaAjax" id="idwait"
			onstart="#{rich:component('wait')}.show()"
			onstop="#{rich:component('wait')}.hide()" />
	</ui:define>
</ui:composition>